:root{
	/* height */
	--header-height: 60px;
	--footer-height: 70px;
	
	/* color */
	--main-color: #232323;
	--dark-black: #232323;
	--dark-gray:  #808080;
}

.li-active {
	position: relative;
	background-color: #181818;
}

.li-active a{
	color: white;
}

.li-active::before{
	position: absolute;
	content: ' ';
	height: 27px;
	width: 17px;
	right: 0;
	display: inline-block;
	background-color: #181818;
}

.header{
	position: fixed;
	top: 0;
	width: 100%;
	min-height: var(--header-height);
	margin-bottom: 0;
	z-index: 999;
	color: #5E6166;
	background-color: #fefefe;
	border-bottom: 1px solid rgba(204, 204, 204, .16);
	box-shadow: 0 3px 4px 0 rgb(0 0 0 / 4%);
}

.card-box{
	background-color: white;
	box-shadow: 0 4px 3px rgba(80, 80, 80, .3);
	border-radius: 4px;
	
	padding: 7px;
}

.header .icon-sp{
	margin: 14px 0 0 17px;
	float: left;
}

.header .icon-sp h1{
	font-size: 27px;
	font-weight: normal;
	font-family: "SimSun";
}

.header .header-nav{
	float: right;
	height: var(--header-height);
}

.header .header-nav ul{
	display: flex;
	height: inherit;
	align-items: center;
	margin-right: 17px;
}

.header .header-nav ul li{
	font-size: 12px;
}

.header .header-nav ul li::before{
	content: ' ';
	width: 1px;
	height: 100%;
	margin: 0 17px;
	border-left: 1px solid var(--dark-gray);
}

.header .logout{
	background-color: #4e6dc1;
	color: white;
	line-height: 20px;
	padding: 0 4px;
	border-radius: 4px;
	display: inline-block;
}

.main-container{
	padding-top: var(--header-height);
	width: 100%;
	min-height: 800px;
	overflow: hidden;
}

.main-container .main-view{
	position: relative;
	width: 93%;
	min-height: 400px;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	
	margin-top: 17px;
	padding-left: 30px;
	/* overflow-x: scroll */
	transition: .2s;
}

.main-container .aside-bar{
	/* border: 1px solid var(--main-color); */
	width: 30px;
	height: 800px;
	/* overflow-y: scroll; */
	background-color: #232323;
	display: inline-block;
	transition: .2s;
}

.main-container .aside-bar:hover{
	width: 13%;
}

.main-container .aside-bar a{
	text-align: center;
	font-size: 14px;
	color: white;
	
	display: none;
}

.main-container .aside-bar a span{
	line-height: 47px;
}

.main-container .aside-bar li a{
	line-height: 40px;
	padding: 15px 17px;
	text-align: center;
	font-size: 14px;
	color: white;
	display: none;
}

.main-container .aside-bar:hover a{
	display: block;
}

.main-container .aside-bar:hover + .main-view{
	width: 85%;
}

.main-container .main-view table{
	border: 1px solid rgba(114, 114, 114, .25);
}

.main-container .main-view table tr{
	/* display: flex; */
	align-items: center;
}

.main-container .main-table button{
	background: none;
	border: none;
	width: 37px;
	font-size: 14px;
	
	cursor: pointer;
}

.main-container .main-table .btn-modify{
	color: #30CBDC;
}

.main-container .main-table .btn-delete{
	color: #eb1f67;
	margin-right: 7px;
}

.main-container .main-table thead tr{
	background-color: #c8ccd1;
}

.main-container .main-table thead tr th{
	line-height: 47px;
}

.main-container .main-table tbody tr td{
	padding: 7px 0;
	font-size: 14px;
}

.main-container .main-table tbody tr:nth-child(odd){
	background-color: #e9edf4;
}

.main-container .page-box {
	margin-top: 1vh;
	text-align: left;
}

.aside-bar li:hover{
	background-color: #181818;
}

.footer{
	width: 100%;
	height: var(--footer-height);
	background-color: var(--dark-black);
}